<template>
    <el-tabs type="card"  class="components-layout-right">
        <el-tab-pane key="1" label="外观">
          <el-form layout="horizontal">
            <el-form-item label="ID :">
              <div class="white">{{svgInfo.id}}</div>
            </el-form-item>
            <el-form-item label="类型 :">
              <div class="white">{{selectSvgInfo.typeName}}</div>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="selectSvgInfo.title" placeholder="请输入组件名称" />
            </el-form-item>
            <el-form-item label="X轴坐标">
              <el-input v-model="selectSvgInfo.svgPositionX" :min="0" :max="1920"/>
            </el-form-item>
            <el-form-item label="Y轴坐标">
              <el-input v-model="selectSvgInfo.svgPositionY" :min="0" :max="1080"/>
            </el-form-item>
            <el-form-item label="颜色">
              <input type="color" v-model="selectSvgInfo.svgColor">
            </el-form-item>
            <el-form-item label="大小">
              <el-input v-model="selectSvgInfo.height" :min="1" :max="3000"/>
            </el-form-item>
            <el-form-item label="宽度">
              <el-input v-model="selectSvgInfo.width" :min="1" :max="3000"/>
            </el-form-item>
            <el-form-item label="旋转">
              <el-input v-model="selectSvgInfo.angle" :min="0" :max="360"/>
            </el-form-item>
            <el-form-item label="文本">
              <el-input v-model="selectSvgInfo.svgText" placeholder="请输入文本" />
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input v-model="selectSvgInfo.fontSize" :min="1" :max="500"/>
            </el-form-item>
            <el-form-item label="表格行数">
              <el-input v-model="selectSvgInfo.tableRowCount" :min="1" :max="500"/>
            </el-form-item>
            <el-form-item label="表格列数">
              <el-input v-model="selectSvgInfo.tableColCount" :min="1" :max="500"/>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane key="2" label="数据">
          <div class="bg-code">{{selectSvgInfo}}</div>
        </el-tab-pane>
      </el-tabs>
      
    </template>
    <script>
    export default {
      props: ['svgInfo'],
      computed:{
        selectSvgInfo(){
          return this.svgInfo;
        }
      },
      watch:{
        'selectSvgInfo.tableRowCount':function(newVal){
          this.$emit('setTableAttr', this.selectSvgInfo.id,newVal,this.selectSvgInfo.tableColCount)
        },
        'selectSvgInfo.tableColCount':function(newVal){
          this.$emit('setTableAttr', this.selectSvgInfo.id,this.selectSvgInfo.tableRowCount,newVal)
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    .components-layout-right{
      padding: 8px !important;
      .ant-tabs-bar{
        margin-bottom: 0 !important;
      }
      .ant-form-item-label{
        width: 100px !important;
        flex-shrink: 0;
      }
      .ant-input,input{
        width: 160px;
        border-radius: 4px;
        border-color: #ddd;
      }
      .ant-form-item-control{
        line-height: 24px !important;
    
        p{
          margin-bottom: 0 !important;
        }
    
        
      }
    
      .ant-form-item{
        display: flex;
        align-items: center;
        flex-flow: nowrap;
        position: relative;
        margin-bottom: 0;
        padding: 8px 0;
    
        &:after{
          content:"";
          position: absolute;
          bottom: 0;
          left: 15px;
          right: 15px;
          bottom: 0;
          height: 1px;
          background: #f2f2f2;
        }
    
        &:last-child::after{
          content:unset
        }
      }
    }
    </style>
    <style scoped>
    .btn-sure{
      width: 260px;
      margin: 20px;
    }
    .bg-code{
      background: #444;
      color: #fff;
      width: calc(100% - 20px);
      margin: 20px 10px;
      border-radius: 4px;
      padding: 10px;
    }
    </style>